<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
  <!-- 水库 -->
  <div class="WaterResources-top">
    <el-tabs type="border-card">
      <el-tab-pane label="水库">
        <Shuiku></Shuiku>
      </el-tab-pane>
      <el-tab-pane label="水厂">
        <Shuichang></Shuichang>
      </el-tab-pane>
      <el-tab-pane label="河道">
        <Hedao></Hedao>
      </el-tab-pane>
      <el-tab-pane label="泵站">
        <Bengzhan></Bengzhan>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Shuiku from "./children/shuku.vue";
import Shuichang from "./children/shuichang.vue";
import Hedao from "./children/hedao.vue";
import Bengzhan from "./children/bengzhan.vue";
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    // this.showchart()
    // this.showschart()
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: { Shuiku, Shuichang, Hedao, Bengzhan },
};
</script>

<style lang="scss">
.WaterResources-top {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  .el-tabs--border-card {
    width: 100%;
    height: 480px;
    background: transparent;
    border: 0px solid transparent;
    // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
  .el-tabs--border-card > .el-tabs__header {
    background-color: #1e3d74;
    border-bottom: 1px solid #1e3d74;
    // margin: 0;
  }
}
</style>
